var webpack = require('webpack');
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var MiniCssExtractPlugin = require("mini-css-extract-plugin");
var CleanWebpackPlugin =require('clean-webpack-plugin');
// const CopyWebpackPlugin = require('copy-webpack-plugin');
var nodeDev = process.env.NODE_ENV==='production'?false:true;
const xydPath = '/xyd'
var config = {
    mode: nodeDev?'development':'production',
    target:nodeDev?'web':'browserslist', //配置browserslistrc会导致webpack-dev-server无法正常热更新使用
    entry:{
        main: ['./src/main.js','babel-polyfill'],
        // vendors: ['react','react-dom','react-router-dom']
    },
    output:{
        path: path.resolve(__dirname,'app'+xydPath+'/main'),
        filename: '[name].[contenthash].js',
        // chunkFilename: '[name].[chunkhash].js'
        publicPath: xydPath+'/main',   //静态页面文件调用的路径
    },
    // 分离代码
    optimization: {
        // minimize: true,
        concatenateModules:nodeDev?false:true,//合并模块
        splitChunks: {//cacheGroups是splitChunks配置的核心，对代码的拆分规则全在cacheGroups缓存组里配置。
            // chunks: 'all',
            cacheGroups: {
                default: {//缓存组的每一个属性都是一个配置规则，我这里给他的default属性进行了配置，属性名可以不叫default可以自己定。
                    //属性的值是一个对象，里面放的我们对一个代码拆分规则的描述。
                    name: 'common',//name：提取出来的公共模块将会以这个来命名，可以不配置，如果不配置，就会生成默认的文件名，大致格式是index～a.js这样的。
                    chunks: 'initial', //chunks：指定哪些类型的chunk参与拆分，值可以是string可以是函数。如果是string，可以是这个三个值之一：all, async, initial，all 代表所有模块，async代表只管异步加载的, initial代表初始化时就能获取的模块。如果是函数，则可以根据chunk参数的name等属性进行更细致的筛选。
                    minChunks: 2,  //模块被引用2次以上的才抽离
                    priority: -20
                },
                vendors: {  //拆分第三方库（通过npm|yarn安装的库）
                    test: /[\\/]node_modules[\\/]/,
                    //test属性用于进一步控制缓存组选择的模块，与chunks属性的作用有一点像，但是维度不一样。test的值可以是一个正则表达式，也可以是一个函数。
                    //它可以匹配模块的绝对资源路径或chunk名称，匹配chunk名称时，将选择chunk中的所有模块。
                    //我这里用了一个正则/[\\/]node_modules[\\/]/来匹配第三方模块的绝对路径，因为通过npm或者yarn安装的模块，都会存放在node_modules目录下
                    name: 'vendor',
                    chunks: 'initial',
                    priority: -10
                }
            }
        }
    },
    module:{
        rules:[
            {
                exclude: /node_modules/, 
                test:/\.(js|jsx)$/,
                use:[
                {
                    loader:'babel-loader',options:{
                        presets: ["@babel/preset-env","@babel/preset-react"],
                        plugins: [
                            [
                                'import',{ libraryName: 'antd',style: true}
                            ],
                            ["@babel/plugin-proposal-decorators", { "legacy": true }],//修饰器
                            "@babel/plugin-proposal-class-properties",//这个插件主要作用是用来编译类的
                            "@babel/plugin-transform-runtime", //编译es7
                            
                        ]
                    }
                }
                ]
            },
            {
                test: /\.(css|less)$/,
                use: [
                    nodeDev?'style-loader':MiniCssExtractPlugin.loader, 
                    // MiniCssExtractPlugin.loader,
                    'css-loader', 
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions:{
                                plugins:nodeDev?[
                                    require('autoprefixer')
                                ]:[
                                    require('autoprefixer'), 
                                    require('cssnano')
                                ]
                            }
                        },  
                    },
                    {
                        loader:'less-loader',
                        options:{
                            lessOptions:{
                                // sourceMap: true,
                                modifyVars: {
                                    'primary-color': '#068bfe',
                                    'link-color': '#068bfe',
                                    'font-size-base': '13px',
                                },
                                javascriptEnabled: true
                            }
                        }
                    }
                ]
            },
            // {
            //     test: /\.(png|jpe?g|gif|webp)(\?.*)?$/,
            //     use: [
            //       {
            //         loader: 'file-loader',
            //         options: {
            //             name: `static/images/[name].[hash:8].[ext]`
            //         }
            //       }
            //     ]
            // },
            // {    //使用 file-loader 可以`(png|svg|jpg|gif)` 格式的图片 嵌入 到css中
            // test: /\.(png|svg|jpg|gif)$/,
            //    use: [
            //         {   loader:"file-loader",
            //             options: {
            //                 name: '[name].[ext]',
            //                 outputPath: 'images',
            //             },
            //         }
            //     ]
            // },
            // {
            //     // 处理图片资源,但是处理不了html中img的路径问题
            //     test: /\.(jpg|png|gif)$/,
            //     loader:'url-loader',
            //     options:{
            //         limit: 8*1024,
            //         // 关闭es6
            //         esModule:false,
            //         name:'static/images/[name].[ext]' //不重复名字
            //     }
            // },
            {
				test:/\.(gif|png|jpg|woff|svg|ttf|eot)$/,
				use: [
					'url-loader?limit=4096&name=/../static/images/[name].[ext]'
				],
            },
            {
                // 处理html中的img
                test: /\.html$/,
                loader:'html-loader'
            }
            
        ]
    },
    resolve: {
        modules: ['node_modules', path.join(__dirname, '/node_modules')],
		extensions: ['.web.tsx', '.web.ts', '.web.jsx', '.web.js', '.ts', '.tsx', '.js', '.jsx', '.json'],
		alias: {}
	},
    plugins:[
        new CleanWebpackPlugin(
            ['./app/'+xydPath+'/main']
        ),
        new HtmlWebpackPlugin({
            filename:'index.html',
            template:'./src/index.html'
        }),
        new webpack.DefinePlugin({
            "process.env":JSON.stringify(process.env),
        }),
    ]
}

module.exports = (env,argv)=> {
    if(process.env.NODE_ENV === 'development'){
        config.optimization.minimize = false;
        config.devServer={
            hot: true,
            open: true,
            port: 3009,
            host: 'localhost',
            historyApiFallback: true,
            // compress: false, 
            // index: 'index.html', // 为了可以展示目录
            contentBase: path.join(__dirname, '/app/'),
            // proxy: {
            //     '/': {
            //         target: 'http://127.0.0.1:8888', //用于生产环境端口
            //         secure: false,
            //         changeOrigin: true,
            //         timeout:600000,
            //     }
            // }
        }
        config.plugins=[
            ...config.plugins,
            new webpack.HotModuleReplacementPlugin(),
        ]
    }
    if(process.env.NODE_ENV === 'production'){
        config.optimization.minimize = true;
        config.plugins=[
            ...config.plugins,
            new MiniCssExtractPlugin({
                filename: 'css/[name].[chunkhash].css'
            }),
            // new CopyWebpackPlugin({
            //     patterns:[
            //         {
            //             from:__dirname+'/src/static',//打包的静态资源目录地址
            //             to:'../static' //打包到dist下面的public
            //         },
            //     ]
            // })
        ]
    }
    return config;
}